<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            padding: 100px;
            width: 500px;
            height: 500px;
            border: 10px dashed rgba(00,00,00,.5);
            background-image: url(https://img1.baidu.com/it/u=943941517,950207652&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1736874000&t=535e774726cfd9ca1471cc97e19eb8c9);
            background-repeat: no-repeat;
            /* background-origin: border-box;
            background-clip: content-box; */
            background-size:cover
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
<!-- 
    背景属性的设置
        回顾之前背景属性
            - 背景图片 background-image:url()  10遍
            - 背景颜色 background-color
            - 背景平铺 background-repeat repeat-x/y
            - 背景定位 background-position 
            - 背景固定 background-attachment 
            - 简写 background
    
    1.Background-origin 背景原点
        - padding-box 背景图像填充框的相对位置
        - border-box 背景图像边界框的相对位置
        - content-box 背景图像的相对位置的内容框
        - 背景默认是从padding区域开始进行平铺的

    2.Background-clip 背景裁切

    3.background-size 背景大小
        - 100% 100% 宽高  不能省略 宽高自适应 拉伸变形  ！！！
        - cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 不会变形！！！
        - contain  把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

 -->